<template>
	<xn-form-container title="黑名单上传" :width="400" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-row :gutter="24">
			<a-col :span="24">
				<a-spin :spinning="uploadLoading">
					<a-upload-dragger
						ref="uploadRef"
						:before-upload="handleBeforeUpload"
						v-model:file-list="fileList"
						:show-upload-list="true"
						:headers="headers"
						accept=".xlsx, .xls, .csv"
						:auto-upload="false"
						multiple
					>
						<p class="ant-upload-drag-icon">
							<inbox-outlined></inbox-outlined>
						</p>
						<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
						<p class="ant-upload-hint">支持单个上传</p>
					</a-upload-dragger>
					<a-button type="link" @click="download">点击下载黑名单上传模版</a-button>
					<a-divider />
					<a-form-item label="类型" name="type">
						<a-select v-model:value="type" :options="typeOptions" placeholder="请选择类型" allow-clear />
					</a-form-item>
				</a-spin>
			</a-col>
		</a-row>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>
<script setup>
	import tool from '@/utils/tool'
	import fileApi from '@/api/tjzy/file/fileApi'
	import downloadUtil from '@/utils/downloadUtil'
	import { message } from 'ant-design-vue'
	import abnormalBlackApi from '@/api/tjzy/abnormal/black/abnormalBlackApi'
	// ===========================================DATA======================================================
	const emit = defineEmits({ successful: null })
	const headers = ref({
		token: tool.data.get('TOKEN')
	})
	const visible = ref(false)
	const uploadLoading = ref(false)
	const fileList = ref([])
	const uploadRef = ref()
	let typeOptions = ref([
		{
			label: '线路',
			value: 1
		},
		{
			label: '业务',
			value: 2
		}
	])
	let type = ref(1)
	// ===========================================METHODS===========================================================

	// 打开抽屉
	const openUpload = () => {
		visible.value = true
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		fileList.value = []
		// emit('successful')
	}
	const handleBeforeUpload = () => {
		return false
	}
	// ===========================================REQUEST===========================================================
	const onSubmit = () => {
		if (!fileList.value.length) {
			message.warning('请选择要上传的文件')
			return
		}
		visible.value = false
		const fileData = new FormData()
		fileData.append('multipartFile', fileList.value[0].originFileObj)
		fileData.append('blacklistAddBo', new Blob([JSON.stringify({ searchType: 1,type:type.value })], { type: 'application/json' }))
		abnormalBlackApi
			.importExcel(fileData)
			.then(() => {
				emit('successful')
				message.success('批量导入成功') // 在这里显示成功消息
			})
			.finally(() => {
				uploadLoading.value = false
			})
		onClose()
	}
	const download = () => {
		fileApi.downloadWithBucket('gzx-excel-template', '黑名单导入模板.xlsx').then((res) => {
			downloadUtil.resultDownload(res)
		})
	}

	defineExpose({
		openUpload
	})
</script>
